<template>
  <div style="background-color: burlywood; height: 600px">
    <ElButton @click="go()">I am Father</ElButton>
    <ChildKitty ref="child1" :flag="state.first" @modify-flag="modifyFlag"></ChildKitty>
    <ChildKitty :flag="state.second" :toggleFlag="toggleFlag"></ChildKitty>
  </div>
</template>
<script lang="ts" setup>
const state = reactive({
  first: false,
  second: true
})
const modifyFlag = () => {
  state.first = !state.first
}
const toggleFlag = () => {
  state.second = !state.second
}
const child1: any = ref(null)
const go = () => {
  // 选项式
  // const child1:any = this.$refs.child1
  console.log(child1)
  child1.value.ex1()

  // child1.exposeSomeMethod()
}
</script>
<style lang="scss" scoped></style>
